<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <table style="width: auto;height: auto;">
            <tr>
                <th> 水果</th>
                <th> 数量</th>
            </tr>
            <tr v-for="e in notes" :key="e.id">
                <td >{{e.thing}}</td>
                <td ><input v-model="" type="text">个</td>
            </tr>
            <tr>
                <td>共: {{totalCount}}</td>
            </tr>

        </table>

    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data:{
                    notes:[
                    {id:1, num: 1,thing:'苹果'},
                    {id:2, num: 2,thing:'香蕉'},
                    {id:3, num: 3,thing:'梨'},],



            },
            methods:{

            },
            computed:{
                totalCount() {
                    let a = 0
                    this.notes.forEach(e => {
                        a+=e.num
                    });
                    console.log('a--',a);
                    

                    return a;
                }
            },

        })



    </script>
    
</body>
</html>